<template>
  <ItemWithLabel :label="item.label" @update:label="$emit('update:item', { ...item, label: $event })">
    <a-input
      :value="item.prop"
      class="max-w-25 mr-2"
      placeholder="请输入 prop"
      @update:value="$emit('update:item', { ...item, prop: $event })"
    ></a-input>
    <a-range-picker
      class="w-50"
      separator="至"
      :placeholder="item.placeholder"
      :disabled="true"
    ></a-range-picker>
  </ItemWithLabel>
</template>

<script setup lang="ts" name="editable-range">
import { EditItem } from '@/form'
import ItemWithLabel from './with-label.vue'

defineProps<{
  item: EditItem.Range
}>()

defineEmits<{
  (event: 'update:item', data: EditItem.Range)
}>()
</script>

<style scoped></style>
